<div class="docs-example-viewer-wrapper">
  <div class="docs-example-viewer-title" *ngIf="view !== 'snippet'">
    <div class="docs-example-viewer-title-spacer">{{exampleData?.title}}</div>

    <button mat-icon-button type="button" (click)="toggleCompactView()" [matTooltip]="'View snippet only'"
            aria-label="View less" *ngIf="showCompactToggle">
      <mat-icon>
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
        <path
          d="M15.41,10H20v2h-8V4h2v4.59L20.59,2L22,3.41L15.41,10z M4,12v2h4.59L2,20.59L3.41,22L10,15.41V20h2v-8H4z"/>
      </svg>
      </mat-icon>
    </button>

    <button mat-icon-button type="button" (click)="toggleSourceView()"
            [matTooltip]="view==='demo' ? 'View code' : 'Hide code'" aria-label="View source">
      <mat-icon>code</mat-icon>
    </button>

    <stack-blitz-button [example]="example"></stack-blitz-button>
  </div>

  <div class="docs-example-viewer-source" *ngIf="view === 'full'">
    <mat-tab-group animationDuration="0ms" [(selectedIndex)]="selectedTab">
      <mat-tab *ngFor="let tabName of _getExampleTabNames()" [label]="tabName">
        <div class="button-bar">
          <button mat-icon-button type="button" (click)="copySource(snippet.toArray()[selectedTab].viewer.textContent)"
                  class="docs-example-source-copy docs-example-button" [matTooltip]="'Copy example source'"
                  title="Copy example source" aria-label="Copy example source to clipboard">
            <mat-icon>content_copy</mat-icon>
          </button>
        </div>
        <code-snippet [source]="exampleTabs[tabName]"></code-snippet>
      </mat-tab>
    </mat-tab-group>
  </div>

  <div class="docs-example-viewer-source-compact" *ngIf="view === 'snippet'">
    <div class="button-bar">
      <button mat-icon-button type="button" (click)="copySource(snippet.first.viewer.textContent)"
              class="docs-example-source-copy docs-example-button" [matTooltip]="'Copy snippet'"
              title="Copy example source" aria-label="Copy example source to clipboard">
        <mat-icon>content_copy</mat-icon>
      </button>
      <button mat-icon-button type="button" (click)="toggleCompactView()"
              class="docs-example-compact-toggle docs-example-button" [matTooltip]="'View full example'"
              aria-label="View less">
        <mat-icon>
          <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
            <polygon points="13,3 13,5 17.59,5 5,17.59 5,13 3,13 3,21 11,21 11,19 6.41,19 19,6.41 19,11 21,11 21,3"/>
          </svg>
        </mat-icon>
      </button>
    </div>
    <code-snippet *ngIf="fileUrl" [source]="fileUrl"></code-snippet>
  </div>

  <div class="docs-example-viewer-body" *ngIf="view !== 'snippet'">
    <ng-template *ngIf="_exampleComponentType && _exampleModuleFactory"
                 [ngComponentOutlet]="_exampleComponentType"
                 [ngComponentOutletNgModuleFactory]="_exampleModuleFactory"></ng-template>
  </div>
</div>
